<div class="charge-details">
    <!--确认弹窗-->
    <p-confirmDialog acceptLabel="确认" rejectLabel="取消"></p-confirmDialog>
    <!--消息提示-->
    <p-messages  [closable]="true" [style]="{'position':'fixed','left': '10vw','top': '0','margin-top': '0','width': '100vw','z-index':'9999'}"></p-messages>
    <!--顶部按钮-->
    <div class="charge-details-header">
      <div class="ui-g-12">
        <div style="margin-top: 4.5vh;font-size: 0.875rem;margin-left: 1vw">
          <label style="color: #fff;margin-left: 0.5vw" >小区：</label>
          <p-dropdown [options]="SearchOption.village" scrollHeight="100px" placeholder="请选择小区..."></p-dropdown>
          <label style="color: #fff;margin-left: 0.5vw">地块：</label>
          <p-dropdown [options]="SearchOption.region" scrollHeight="100px" placeholder="请选择地块..."></p-dropdown>
          <label style="color: #fff;margin-left: 0.5vw">楼栋：</label>
          <p-dropdown [options]="SearchOption.building" scrollHeight="100px" placeholder="请选择楼栋..."></p-dropdown>
          <label style="color: #fff;margin-left: 0.5vw">单元：</label>
          <p-dropdown [options]="SearchOption.unit"  scrollHeight="100px" placeholder="请选择单元..."></p-dropdown>
          <label style="color: #fff;margin-left: 0.5vw">房间：</label>
          <p-dropdown [options]="SearchOption.room"  scrollHeight="100px" placeholder="请选择房间..."></p-dropdown>
        </div>
      </div>

      <!--搜索-->
      <div class="ui-inputgroup charge-details-header-search">
        <input type="text" pInputText placeholder="请输入缴费人" #input>
        <button id="disabled-btn" class="charge-details-header-btn-search" type="button"  (click)="detailsSearchClick($event)"  label="搜索">搜索</button>
      </div>
    </div>
  <!--<button class="charge-details-dialog-Btn charge-details-dialog-Btn-sure" style="position: absolute;top: 18.7vh;right: 5vw;z-index: 10000">搜索</button>-->
    <!--表格-->
    <div class="charge-details-table">
      <p-scrollPanel [style]="{width:'100%',height: '90%'}" styleClass="custombar">
        <p-table [columns]="ChargedetailTableTitle" [value]="detailsTableContent" >
          <ng-template pTemplate="header" let-columns>
            <tr >
              <th *ngFor="let col of columns"  [ngStyle]="this.detailsTableTitleStyle">
                {{col.header}}
              </th>
            </tr>
          </ng-template>
          <ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
          <tr [pSelectableRow]="rowData"  *ngIf="rowIndex%2!=1" [ngStyle]="{'background':'#2E3037','color':'#DEDEDE','text-align': 'center','height':'2vw'}">
              <td  *ngFor="let col of columns.slice(0,columns.length-1)" >
                <span *ngIf="col.header === '缴费金额'">￥</span>{{rowData[col.field]}}
              </td>
              <td>
                <button class="charge-details-table-Btn" (click)="detailsDialogClick(rowData)">详情</button>
              </td>
            </tr>
            <tr [pSelectableRow]="rowData"  *ngIf="rowIndex%2!=0" [ngStyle]="{'background':'#33353C','color':'#DEDEDE','text-align': 'center','height':'2vw'}">
              <td  *ngFor="let col of columns.slice(0,columns.length-1)" >
                <span *ngIf="col.header === '缴费金额'">￥</span>{{rowData[col.field]}}
              </td>
              <td>
                <button class="charge-details-table-Btn" (click)="detailsDialogClick(rowData)">详情</button>
              </td>
            </tr>
          </ng-template>
        </p-table>
      </p-scrollPanel>
    </div>
   <!--详情弹框-->
    <p-dialog header="费用详情" [(visible)]="detailsDialog" [width]="800" >
      <!--Content-->
      <div class="ui-g ui-fluid">
        <div class="ui-g-12">
          <div class="ui-g-6" *ngFor="let item of detailsAddTitle">
            <div class="ui-g-6" >
              <label >{{item.name}}:</label>
            </div>
            <div class="ui-g-6">
              <label >{{item.value}}<span *ngIf="item.name ==='客户名称'">先生</span> <span *ngIf="item.name ==='建筑面积'">平米</span></label>
            </div>
          </div>

        </div>
        <div class="ui-g-12">
          <p-scrollPanel [style]="{width:'100%',height: '20vh'}" styleClass="custombar">
            <p-table [columns]="detailsDialogTableTitle" [value]="detailsProject">
              <ng-template pTemplate="header" let-columns>
                <tr >
                  <th *ngFor="let col of columns" >
                    {{col.header}}
                  </th>
                </tr>
              </ng-template>
              <ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
                <tr [pSelectableRow]="rowData"  [ngStyle]="{'text-align':'center'}">
                  <td  *ngFor="let col of columns" >
                    <span *ngIf="col.header === '应收金额' || col.header === '实收金额'">￥</span>{{rowData[col.field]}}
                  </td>
                </tr>
              </ng-template>
            </p-table>
          </p-scrollPanel>
        </div>
        <div class="ui-g-12" [ngStyle]="{'line-height':'3vh'}">
          <div class="ui-g-4">
            <div class="ui-g-5">
              <label>缴费人：</label>
            </div>
            <div class="ui-g-7">
              <label>{{chargeDetails.payerName}}</label>
            </div>
          </div>
          <div class="ui-g-4">
            <div class="ui-g-6">
              <label >应收账单：</label>
            </div>
            <div class="ui-g-6">
              <label >￥{{chargeDetails.amountTotalReceivable}}</label>
            </div>
          </div>
          <div class="ui-g-4">
            <div class="ui-g-5">
              <label >实收账单：</label>
            </div>
            <div class="ui-g-7">
              <label>￥{{chargeDetails.actualTotalMoneyCollection}}</label>
            </div>
          </div>
          <div class="ui-g-4">
            <div class="ui-g-5">
              <label >缴费类型：</label>
            </div>
            <div class="ui-g-7" >
              <label>{{chargeDetails.paymentMethod}}</label>
            </div>
          </div>
          <div class="ui-g-4">
            <div class="ui-g-6">
              <label >修正金额：</label>
            </div>
            <div class="ui-g-6">
              <label >{{chargeDetails.surplus}}</label>
            </div>
          </div>
        </div>
      </div>
      <p-footer>
        <div class="ui-dialog-buttonpane ui-helper-clearfix">
          <button class="charge-details-dialog-Btn charge-details-dialog-Btn-sure" (click)="detailsSureClick()">打印单据</button>
          <button class="charge-details-dialog-Btn charge-details-dialog-Btn-false" (click)="detailsFaleseClick()">取 消</button>
        </div>
      </p-footer>
    </p-dialog>
  <rbi-paging [option]="option" (pageClick)="nowpageEventHandle($event)"></rbi-paging>
  <rbi-loading [hidden]="loadHidden" style="position: absolute;left: 45vw;top:40vh;z-index: 99999"></rbi-loading>

</div>

